<template>
  <div class="dept">
    <div class="select" style="display: inline-flex;">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="年月">
          <el-date-picker  size="small"
              v-model="form.salaryYearMonth"
              @change="getDataList"
              type="month"
              placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button  size="small" type="primary" @click="getDataList">筛选</el-button>
          <el-button  size="small" type="primary" @click="dialogFormVisible=true">重新计算数据</el-button>
          <el-button  size="small" type="primary" @click="exportData">数据导出</el-button>
        </el-form-item>


      </el-form>
    </div>
    <el-table
        id="table"
        :data="tableData"
        stripe
        border
        :show-summary="true"
        @selection-change="handleSelectionChange"
        default-expand-all
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}">
      <el-table-column>
        <template slot="header"><h2 style="float: left!important;">四川瀚海{{
            form.salaryYearMonth|formatDateMonth
          }}每日各部门工资明细表（财务表）<span style="font-size: 6px">单位：元</span></h2></template>
        <el-table-column label="部门" prop="dept" sortable min-width="180" fixed>
        </el-table-column>
        <el-table-column label="合计">
          <el-table-column label="责任制总额" prop="totalResponsibility" min-width="120">
          </el-table-column>
          <el-table-column label="计时制总额" prop="totalTiming" min-width="120">
          </el-table-column>
          <el-table-column label="总出勤工资" prop="totalAttendnceWage" min-width="120">
          </el-table-column>
          <el-table-column label="总应付工资" prop="totalWagePayable" min-width="120">
          </el-table-column>
        </el-table-column>

        <template v-for="item in monthData">
          <el-table-column :label="item.date+'（'+item.day+'）'">
            <el-table-column label="责任制" :prop="'allResponsibility'+item.dayIndex" min-width="120">
            </el-table-column>
            <el-table-column label="计时制" :prop="'allTiming'+item.dayIndex" min-width="120">
            </el-table-column>
            <el-table-column label="出勤人数" :prop="'personNum'+item.dayIndex" min-width="120">
            </el-table-column>
            <el-table-column label="出勤工资" :prop="'attendanceWage'+item.dayIndex" min-width="120">
            </el-table-column>
            <el-table-column label="应付工资" :prop="'wagesPayable'+item.dayIndex" min-width="120">
            </el-table-column>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="计算" :visible.sync="dialogFormVisible" center>

      <el-form :model="form">
        <el-row>
          <el-col :span="24">
            <el-date-picker style="width: 100%!important;"  size="small"
                            v-model="form.salaryYearMonth"
                            type="month"
                            :clearable="false">
            </el-date-picker>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"  size="small">取 消</el-button>
        <el-button type="primary" @click="get"  size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import ToolBar from "@/components/common/ToolBar";

export default {
  name: "DeptDayDataOfMonth",
  components: {ToolBar},
  data() {
    return {
      form: {
        salaryYearMonth: moment(new Date()).startOf('month')
      },
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      tableData1: [],
      dialogFormVisible: false,
      monthData: []
    }
  },
  created() {
    this.monthData = this.$tools.getMonthData(this.form.salaryYearMonth)
  },
  methods: {
    getObjectProperty(scope, dayIndex) {
      return eval("scope.row.wagesPayAble" + dayIndex);
    },
    handleClick(tab, event) {
      this.getDataList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(row) {
      console.log(row);
      this.form = row
      this.setDialogVisible(false)
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    getDataList() {
      this.dialogFormVisible = false
      console.log("查询数据：", this.form)
      axios.post("/fin_wages_detail_month/list", this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data
          this.monthData = this.$tools.getMonthData(this.form.salaryYearMonth)
        } else {
          this.tableData = []
          this.monthData = this.$tools.getMonthData(this.form.salaryYearMonth)
        }
      })


    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    getDataSummary() {

    },
    get(){
      axios.post("/fin_wages_detail_month/get", this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data
          this.monthData = this.$tools.getMonthData(this.form.salaryYearMonth)
        } else {
          this.tableData = []
          this.monthData = this.$tools.getMonthData(this.form.salaryYearMonth)
        }
      })
    },
    exportData() {
      let excelName = '四川瀚海' + moment(this.form.salaryYearMonth).format('YYYY年MM月') + '每日各部门工资明细表（财务表）.xlsx';
      var xlsxParam = {raw: true};//转换成excel时，使用原始的格式
      // 克隆节点
      let tables = document.getElementById("table").cloneNode(true);
      // 判断是否为固定列，解决（为固定列时，会重复生成表格）
      if (tables.querySelector('.el-table__fixed') !== null) {
        tables.removeChild(tables.querySelector('.el-table__fixed'))
      }
      let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
      var table_write = this.$XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        this.$FileSaver.saveAs(
            new Blob([table_write], {type: "application/octet-stream"}),
            excelName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      return table_write;

    },
  },


}
</script>

<style scoped>

</style>
